<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button @click="push">按钮</button>
    未完成：{{ activeCount }}
    <script type="module">
      import {
          createApp,
          reactive,
          computed,
        } from "./node_modules/vue/dist/vue.esm-browser.js";
        const data = [
          { text: "看书", completed: false },
          { text: "敲代码", completed: false },
          { text: "约会", completed: true },
        ];

        createApp({
          setup () {
            // 通过 reactive 转换成响应式数据
            const todos = reactive(data)
            // 通过 computed 计算属性，监控响应式数据的长度变化
            const activeCount = computed(() => {
              return todos.filter(item => !item.completed).length
            })
            // 当点击按钮，触发 push 方法；
            // 会重新调用 computed 计算 data 中未完成的长度
            return {
              activeCount,
              push: () => {
                todos.push({
                  text: '开会',
                  completed: false
                })
              }
            }
          }
        })
      </script>
  </div>
</body>

</html>